<template>
	<!-- 吸顶 -->
	<view class="list-box">
		<view class="search">
			<view class="search-box">
				<my-search  :bgcolor="'#ffffff'" @mySearch="gotoSearch"></my-search>
			</view>
		</view>
		<view class="box">
			<view class="box-title">
				<view class="navTitle" v-for="(item,index) in navList" :key="index">
					<view :class="{'active':isActive === index}" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view>

			<view class="box-content">
				<view class="box-content_view" v-for="item in shareList" @click="openShare(item)">
					<view class="box-content_img">
						<image class="image" :src="item.avatar" mode=""></image>
					</view>
					<view class="box-content_text">
						<view class="box-content_text_name">
							<text>{{item.faultName}}</text>
						</view>
						<view class="box-content_text_content">
							<view class="box-content_text_content_text">
								<text style="margin-right: 20rpx;">{{item.author}}</text><text>
									{{item.createTime | friendlyDate(item.createTime)}}</text>
							</view>
							<view class="box-content_text_content_view">
								<!-- <u-tag :text="item.browses" shape="circle" size="mini" type="info">
								</u-tag> -->
								<u-icon name="eye-fill"></u-icon>
								<text class="time">{{item.browses}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="touch" @click="share()">
			故障消缺
		</view>
		<!-- 
		<view class="touch"  @click="share()">
			技术分享
		</view> -->
		<!-- <image class="touch" v-if="isActive == 0" @click="share()" src="/static/nav_icon/shebeifuwu@2x.png"></image> -->
		<!-- <image class="touch" v-else @click="share()" src="/static/nav_icon/fenxiang@2x.png"></image> -->
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				type:'0',
				isActive: 0,
				navList: [{
					index: 0,
					title: '故障集合'
				}, {
					index: 1,
					title: "热门"
				}, {
					index: 2,
					title: "月榜"
				}, {
					index: 3,
					title: "周榜"
				}, {
					index: 4,
					title: "日榜"
				}],
				shareList: [],

				//是否正在请求数据
				isloading: false,
				url: '',
				params: {
					pageNum: 1,
					pageSize: 10,
				}, //列表数据请求参数
				total: 0, //总条数
				keyword:'',
			}
		},

		onLoad(option) {
			// this.keyword = option.keyword != undefined?option.keyword:"";
			// this.$store.state.keyword = this.keyword
			if(option != undefined){
				this.isActive = option.isActive != undefined?parseInt(option.isActive): parseInt('0')
				this.keyword = option.keyword != undefined?option.keyword:"";
				this.$store.state.keyword = this.keyword
			}
			
			this.getWindShares();
		},
		filters: {
			friendlyDate(timestamp) {
				var formats = {
					'year': '%n% 年前',
					'month': '%n% 月前',
					'day': '%n% 天前',
					'hour': '%n% 小时前',
					'minute': '%n% 分钟前',
					'second': '%n% 秒前',
				};
				var date = new Date(Date.parse(timestamp.replace(/-/g, "/")))
				let newNow = date.getTime();
				var now = Date.now();
				var seconds = Math.floor((now - newNow) / 1000);
				var minutes = Math.floor(seconds / 60);
				var hours = Math.floor(minutes / 60);
				var days = Math.floor(hours / 24);
				var months = Math.floor(days / 30);
				var years = Math.floor(months / 12);

				var diffType = '';
				var diffValue = 0;
				if (years > 0) {
					diffType = 'year';
					diffValue = years;
				} else {
					if (months > 0) {
						diffType = 'month';
						diffValue = months;
					} else {
						if (days > 0) {
							diffType = 'day';
							diffValue = days;
						} else {
							if (hours > 0) {
								diffType = 'hour';
								diffValue = hours;
							} else {
								if (minutes > 0) {
									diffType = 'minute';
									diffValue = minutes;
								} else {
									diffType = 'second';
									diffValue = seconds === 0 ? (seconds = 1) : seconds;
								}
							}
						}
					}
				}
				return formats[diffType].replace('%n%', diffValue);
			}
		},
		methods: {
			
			// 跳转到搜索页面
			gotoSearch() {
				uni.redirectTo({
					url: '/subpackage/search_share/search_share?isActive='+this.isActive
				})
			},
			// 下拉加载
			onPullDownRefresh() {
				// 重置关键数据
				this.params.pageNum = 1;
				this.total = 0;
				this.isloading = false
				this.shareList = []
				this.getWindShares(() => uni.stopPullDownRefresh())
			},
			// 触底事件  上拉加载更多
			onReachBottom() {
				// 判断是否还有下一页数据
				if (this.params.pageNum * this.params.pageSize >= this.total) return this.$u.toast('数据加载完毕');
				if (this.isloading) return
				this.params.pageNum += 1
				this.getWindShares()
			},

			//  获取分享技术信息
			getWindShares(cb) {
				this.isloading = true
				
				this.$u.api.getWindShareFaultList({
					faultName:this.keyword,
						pageNum: this.params.pageNum,
						pageSize: this.params.pageSize,
						type: this.type
					})
					.then(res => {
						this.isloading = false
						cb && cb()
						this.shareList = [...this.shareList,...res.rows]
						this.total = res.total
					});

				// if (this.isActive == 0) {
				// 	// 获取故障消缺 信息列表
					
				// } else {
				// 	this.$u.api.getWindShareTechnology({
				// 		title:this.keyword,
				// 			pageNum: this.params.pageNum,
				// 			pageSize: this.params.pageSize,
				// 		})
				// 		.then(res => {
				// 			this.isloading = false
				// 			cb && cb()
				// 			this.shareList = [...this.shareList, ...res.rows]
				// 			this.total = res.total
				// 		});
				// }

			},
			//  打开分享技术界面
			openShare(item) {
				if (this.isActive == 0) {
					uni.navigateTo({
						url: '/subpackage/technology_share/shareDetail_fault?shareId=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/subpackage/technology_share/shareDetail?shareId=' + item.id
					})
				}
			},
			//  跳转到分享页
			share() {
				//if (!this.$store.state.isLogin) return this.$u.toast("请登录");

				if (this.isActive == 0) {
					uni.navigateTo({
						url: '/subpackage/technology_share/share_new_fault'
					})

				} else {
					uni.navigateTo({
						url: '/subpackage/technology_share/share_new'
					})
				}
			},
			// 跳转页面
			checked(index) {
				this.isActive = index
				if (index == 0) {
					this.type = 0
					this.shareList = [];
					this.getWindShares();
				} else if (index == 1) {
					this.type = 1
					this.shareList = [];
					this.getWindShares();
				}else if (index == 2) {
					this.type = 2
					this.shareList = [];
					this.getWindShares();
				}else if (index == 3) {
					this.type = 3
					this.shareList = [];
					this.getWindShares();
				}else if (index == 4) {
					this.type = 4
					this.shareList = [];
					this.getWindShares();
				}
			},

		},
	}
</script>

<style scoped lang="scss">
	.list-box {

		// background-color: lightgreen;
		.box {
			background-color: #f6f6f6;
			width: 100%;
			height: 90%;
			display: flex;
			flex-direction: column;
			box-shadow: 0px 1px 2px #e3e3e3;

			.box-title {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: 2px solid #d8d8d8;

				.navTitle {
					height: 60rpx;
					line-height: 60rpx;
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi;
					color: #333;
				}

				.active {
					position: relative;
					color: #1F75FE;
				}

				.active::after {
					content: "";
					position: absolute;
					width: 100rpx;
					height: 4rpx;
					background-color: #1F75FE;
					left: 0px;
					right: 0px;
					bottom: 0px;
					margin: auto;
				}

				.text1 {
					font-size: 1.3em;
					text-indent: 1em;
				}

				.text2 {
					color: #d8d8d8;
					font-size: 1.2em;
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			// 技术分享
			.box-content {
				// padding: 20rpx 40rpx 40rpx 40rpx;
				background-color: #FFFFFF;

				//  总体 文本框
				.box-content_view {
					border-bottom: 1px solid #aab0c6;
					margin: 15rpx;
					height: 120rpx;
					display: flex;

					// 头像
					.box-content_img {
						width: 10%;
						margin: auto;

						.image {
							width: 56rpx;
							height: 56rpx;
						}
					}

					// 内容
					.box-content_text {
						width: 90%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						// 内容 标题
						.box-content_text_name {
							text {
								color: #6293d4;
								font-size: 30rpx;
								
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								overflow:hidden;
								/*! autoprefixer: off */
								-webkit-box-orient: vertical;
							}
						}

						// 内容 标题 内容
						.box-content_text_content {
							display: flex;
							justify-content: space-between;

							// 
							.box-content_text_content_text {
								text {
									color: #748594;
									font-size: 25rpx;
								}
							}

							.box-content_text_content_view {
								color: #748594;
								font-size: 25rpx;
							}
						}
					}
				}
			}
		}

		.touch {
			position: fixed;
			// border-radius: 60rpx;
			right: 0rpx;
			bottom: 200rpx;
			width: 130rpx;
			height: 130rpx;
			line-height: 130rpx;
			/* 文字垂直居中 */
			text-align: center;
			/* 水平居中 */
			 background-color: #3BA2FF;
			border-radius: 50%;
			color: #fff;
			font-weight: bold;
			font-size: 30rpx;
		}

		.flex-center {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
